import React, { useState } from 'react';
import './shop.less';
import { Button, Form, Input } from 'antd';
import { Toast } from 'antd-mobile';
import Image from '../../static/images/BBD房子.png';
import { Map } from 'react-bmapgl';
import axios from 'axios';
import { history, request } from 'umi';

export default function System() {
  const [name, setname] = useState('');
  const [address, setaddress] = useState('');
  const [depict, setdepict] = useState('');
  const [longitude, setlng] = useState('');
  const [latitude, setlat] = useState('');
  const [map, setmap] = useState('');
  const [sta, setsta] = useState(false);

  //门店名称
  const handleContent = (ev) => {
    console.log(ev);
    setname(ev.target.value);
  };
  //门店位置
  const handleContents = (ev) => {
    console.log(ev);
    setaddress(ev.target.value);
  };
  //门店描述
  const handleContentss = (ev) => {
    console.log(ev);
    setdepict(ev.target.value);
  };

  async function shopBao() {
    console.log(name, address, depict);
    if (sta) {
      let address = map;
      let objs = { name, address, depict, longitude, latitude };
      await axios
        .post('http://localhost:7980/yzb/shopAdd', { objs })
        .then((res) => {
          // console.log(res,'1111111111111111111');
          if (res.status == 200) {
            // console.log('添加成功');
            Toast.show({
              icon: 'success',
              content: '保存成功',
            });
            setTimeout(() => {
              history.push('/home');
            }, 1000);
          }
        });
    } else {
      let objs = { name, address, depict };
      await axios
        .post('http://localhost:7980/yzb/shopAdd', { objs })
        .then((res) => {
          console.log(res, '1111111111111111111');
          if (res.status == 200) {
            console.log('添加成功');
            Toast.show({
              icon: 'success',
              content: '保存成功',
            });
            setTimeout(() => {
              history.push('/home');
            }, 1000);
          }
        });
    }
  }
  const Mapditu = (e) => {
    console.log(e.latlng);
    setlat(e.latlng.lat);
    setlng(e.latlng.lng);
    var geoc = new BMapGL.Geocoder();
    var pt = e.latlng;
    geoc.getLocation(pt, function (rs) {
      var addComp = rs.addressComponents;
      let c =
        addComp.province +
        ', ' +
        addComp.city +
        ', ' +
        addComp.district +
        ', ' +
        addComp.street +
        ', ' +
        addComp.streetNumber;
      setaddress(c);
      setmap(c);
      if (c) {
        setsta(true);
      } else {
        setsta(false);
      }
      console.log(
        addComp.province +
          ', ' +
          addComp.city +
          ', ' +
          addComp.district +
          ', ' +
          addComp.street +
          ', ' +
          addComp.streetNumber,
      );
      // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    });
  };
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  type FieldType = {
    门店名称?: string;
    门店位置?: string;
    门店描述?: string;
  };

  return (
    <div className="quan">
      <div className="quan1">
        <div className="header"></div>
        <div className="bottom"></div>
        <div className="ding1">
          <div className="headerding">
            <ul>
              <li
                style={{ fontSize: '2vh', fontWeight: '800', color: 'white' }}
              >
                门店管理
              </li>
              <li style={{ color: 'white' }}>
                <img
                  src={Image}
                  alt=""
                  style={{ width: '3vh', height: '3vh' }}
                />
              </li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>系统管理</li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>门店管理</li>
            </ul>
          </div>
          <div className="ding">
            <div className="content">
              <div className="system-form">
                <div className="form-left">
                  <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{
                      maxWidth: 600,
                      marginTop: '50px',
                      // marginRight: '150px',
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                  >
                    <Form.Item<FieldType>
                      label="门店名称"
                      name="门店名称"
                      rules={[
                        {
                          required: true,
                          message: 'Please input your 门店名称!',
                        },
                      ]}
                    >
                      <Input onChange={handleContent} />
                    </Form.Item>

                    <Form.Item<FieldType> label="门店位置" name="门店位置">
                      {!sta ? (
                        <Input onChange={handleContents} />
                      ) : (
                        <span>{address}</span>
                      )}
                    </Form.Item>
                    <Form.Item<FieldType>
                      label="门店描述"
                      name="门店描述"
                      rules={[
                        {
                          required: true,
                          message: 'Please input your 门店描述!',
                        },
                      ]}
                    >
                      <Input onChange={handleContentss} />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 16, span: 16 }}>
                      <Button style={{ marginRight: '10px' }}>重置</Button>
                      <Button
                        type="primary"
                        htmlType="submit"
                        onClick={shopBao}
                      >
                        保存
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
                <div className="form-right">
                  <h3 style={{ padding: '30px' }}>点击地图选择你的门店位置</h3>
                  <div style={{ width: '80%', margin: '0 auto' }}>
                    <Map
                      center={new BMapGL.Point(116.404449, 39.914889)}
                      zoom={12}
                      heading={0}
                      tilt={40}
                      // onClick={(e: any) => console.log(e)}
                      onClick={Mapditu}
                      enableScrollWheelZoom
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
